<template>
	<div>
		<navbar>
			<template v-slot:left ><div @click="navbar_click_left">银川  ﹀</div></template>
			<template v-slot:center>
				<search_box></search_box>
			</template>
			<template v-slot:right>
				<div @click="navbar_click_right">
					<img src="@/assets/img/navbar/通知.png" alt="" v-show="navbar_rigth_img_show">
					<img src="@/assets/img/navbar/通知1.png" alt="" v-show="!navbar_rigth_img_show">
				</div>
			</template>
		</navbar>
		<hot_search></hot_search>
		<div class="underlying_red_background"></div>
		<!-- <aide></aide> -->
		<Swiper >
			<Swiper_tem v-for='item in banners'>
				<a :href="item.url">
					<img :src="item.img" alt="">
				</a>
			</Swiper_tem>
		</Swiper>
	</div>
</template>

<script>
	import navbar from 'componentes/common/navbar/navbar.vue'
	import search_box from 'componentes/common/navbar/search_box.vue'
	import hot_search from 'componentes/common/hot_search/hot_search.vue'
	// import aide from 'componentes/common/aide/aide.vue'
	import {Swiper,Swiper_tem} from 'componentes/common/swiper/index.js'
	
	export default({
		name:'home',
		data(){
			return{
				navbar_rigth_img_show:true,
				banners:[{
					img:'http://puui.qpic.cn/tv/0/634094364_1080607/0',
					url:'https://m.baidu.com'
				},
				{
					img:'http://puui.qpic.cn/tv/0/625092575_1080607/0',
					url:'https://m.baidu.com'
				},
				{
					img:'https://puui.qpic.cn/tv/0/620768497_1680580/0',
					url:'https://m.baidu.com'
				}
				]
			}
		},
		components:{
			navbar,
			search_box,
			hot_search,
			// aide,
			Swiper,
			Swiper_tem
		},
		methods:{
			navbar_click_left(){
				this.$router.push('/#') // 左上角地址按钮
			},
			navbar_click_right(){
				this.$router.push('/#')  // 消息通知按钮
				this.navbar_rigth_img_show = !this.navbar_rigth_img_show
		  }
		}
	})
</script>

<style>
	.underlying_red_background{
		position:absolute;
		top:0;
		z-index: -1;
		background-color: var(--color-tint) ;
		width: 100%;
		height: 10rem;
		border-radius: 0 0 20% 20%;
	}
</style>

